<template>
    <n-checkbox-group v-bind="props">
        <n-space>
            <n-checkbox
                v-for="item in options"
                :key="item.value"
                :value="item.value"
                :label="item.label"
            />
        </n-space>
    </n-checkbox-group>
</template>

<script setup lang="ts">
import { CheckboxProps } from 'naive-ui'

export type CheckboxGroupProps = {
    options: CheckboxProps[]
    disabled?: boolean //	false	选项组是否禁用
    'default-value'?: Array<string | number> // null	选项组非受控模式下的默认值
    max?: number // undefined	可被勾选的 checkbox 的最大数量
    min?: number // undefined	可被勾选的 checkbox 的最小数量
    value?: Array<string | number> | null //	undefined	选项组受控模式下的值
    'on-update:value'?: (
        value: string | number,
        meta: { actionType: 'check' | 'uncheck'; value: string | number }
    ) => void // undefined	选项组的值改变时的回调
}

const props = defineProps<CheckboxGroupProps>()
</script>
